<template>
  <div class="shallow">
    <h5>求和:{{ sum }}</h5>
    <h5>名字:{{ person.name }}</h5>
    <h5>年龄:{{ person.age }}</h5>
    <button @click="changeNum">+1</button>
    <button @click="changeName">改名</button>
    <button @click="changeAge">改年龄</button>
    <button @click="changePerson">改人</button>
    <h5>car:{{ car }}</h5>
    <button @click="car.options = { color: '1', engine: '2' }">改车</button>
  </div>
</template>

<script setup lang="ts" name="Shallow">
import { shallowRef, shallowReactive } from "vue"
//! 只处理第一层,即只能 . 一次
let sum = shallowRef(1)
let person = shallowRef({
  name: '张三',
  age: 18
})
let car = shallowReactive({
  brand: '奔驰',
  options: {
    color: 'red',
    engine: 'v8'
  }
})
function changeNum() {
  sum.value++
}
function changeName() {
  person.value.name += '~'
}
function changeAge() {
  person.value.age++
}
function changePerson() {
  person.value = {
    name: '李四',
    age: 20
  }
}
</script>

<style scoped></style>